<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Panoramio and Youtube Example</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
        <script src="examples.js" type="text/javascript"></script>
        <script src="https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22earth%22%2C%22version%22%3A%221%22%7D%5D%7D&key=ABQIAAAAbEBR9v0lqBFdTfOcbe5WjRQPjtdHQ3xdBuNAR-KDFOW1mqdVsRRmZhmrl-MOSGS44M9Gug9FdssEgQ" type="text/javascript" charset="utf-8"></script>
        <script id="sample" type="text/example" charset="utf-8">

            var tree;

            $(document).ready(function(){
                google.earth.createInstance('map3d', init, failure);                
            });

            function init(ge) {
                ge.getWindow().setVisibility(true);
                var gex = gex = new GEarthExtensions(ge);
                
                tree = kmltree({
                    url: './kml/youtube_panoramio.kmz',
                    gex: gex,
                    element: $('#tree'),
                    mapElement: $('#map3d'),
                    setExtent: true,
                    displayEnhancedContent: true,
                    unknownIframeDimensionsDefault: function(kmlObject){
                        if(kmlObject.getUrl().match(/youtube/)){
                            // All youtube popups are around this size
                            return {height: 335, width:335};
                        }else{
                            // Panoramio popups vary greatly, but this 
                            // dimension seems to work for many of them
                            return {height: 455, width:535};
                        }
                    }
                });
                
                tree.load();
            }

            function failure(errorCode) {
                alert('failed to load plugin');
            }
            
        </script>
    </head>
    <body>
        <div class="content">
            <p class="description">
                This examples shows both Youtube and Panoramio kml layers using 
                the <code>displayEnhancedContent</code> option. Because both these
                layers include dynamic description content that resets the 
                window.location of the popup, 
                <code>unkownIframeDimensionsDefault</code> must be specified.
            </p>
            <p>
                <em>Note, this demo may not work in versions of the plugin < 
                1.007.</em> It appears that Google may be providing different 
                versions of the layer based on plugin version. If you have a 
                prior version of the earth api installed, 
                <code>displayEnhancedContent</code> will still work but not 
                for this layer. Try 
                <a href="displayEnhancedContent.html">this example</a> 
                instead.
            </p>
        </div>
    </body>
</html>